<script setup>
import {ajax} from '@/utils/tradeInfo';
	import { onMounted, ref } from 'vue';
	const tradeInfo = ref([])
const channelEle = ref(null)
const share = () => {
  channelEle.value.open()
  uni.hideTabBar()
}
const maskClick = () => {
  uni.showTabBar()
  channelEle.value.close()
}
const navigateTo = (index, scroll = false) => {
		uni.navigateTo({
      url: `/pages/tradeInfo/tradeInfo?page=${index + 1}&scroll=${scroll}`
		})
	}
const channels = ref([
  {
    name: '微信好友',
    icon: '../../../static/wechat.png'
  },
  {
    name: '朋友圈',
    icon: '../../../static/moments.png'
  },
  {
    name: 'QQ好友',
    icon: '../../../static/QQ.png'
  },
  {
    name: '复制链接',
    icon: '../../../static/copy.png'
  }
])
onMounted(async () => tradeInfo.value = await ajax())
</script>

<template>
	<div class="trade">
		<div class="item" v-for="(trade, i) in tradeInfo" :key="i">
			<div class="user-container">
				<div class="user">
          <image :src="trade.userAvatarUrl" class="user-image"></image>
					<div class="name">{{trade.userName}}</div>
          <div class='price'>￥{{ trade.trade.price }}</div>
				</div>
				<div 
					class="concern link"
          :style="{color: trade.concern ? '#999999' : 'black'}"
					@click="trade.concern = !trade.concern"
				>
          {{ trade.concern ? '已关注' : '+ 关注' }}
				</div>
			</div>
			<div class="info">
        <rich-text :nodes="trade.trade.introduce"/>
			</div>
      <div class="imgs">
        <image :src="trade.trade.urls[0]" class="img" @click="navigateTo(i)"></image>
			</div>
			<div class="social-actions">
				<div class="social collection link" @click="trade.collection = !trade.collection">
					<img
						class="social-image"
						:src="trade.collection ? '../../../static/Scollect.png' : '../../../static/collect.png'"
            alt=""/>
					<span>收藏</span>
				</div>
				<div class="social comment link">
					<img
						class="social-image"
						src="../../../static/comment.png"
            alt=""/>
          <span @click="navigateTo(i,true)">评论</span>
				</div>
				<div class="social like link" @click="()=>{
					trade.like.islike = !trade.like.islike
					trade.like.islike ? trade.like.total++ : trade.like.total--
				}">
					<img
						class="social-image"
						:src="trade.like.islike ? '../../../static/Slike.png' : '../../../static/like.png'"
            alt=""/>
					<span>{{trade.like.total}}</span>
				</div>
        <div class="social share link" @click="share">
					<img
						class="social-image"
						src="../../../static/share.png"
            alt=""/>
					<span>分享</span>
				</div>
			</div>
		</div>
    <uni-popup ref="channelEle" background-color="#fff" border-radius="10px 10px 0 0" type="bottom"
               @maskClick="maskClick">
      <view class="channels content">
        <div v-for="(channel,i) in channels" :key="i" class="channel link" @click="maskClick">
          <img :src="channel.icon" alt="" class="icon"/>
          <span class="name">{{ channel.name }}</span>
        </div>
      </view>
    </uni-popup>
	</div>
</template>

<style scoped>
	.trade>.item{
		width: 100%;
		margin-bottom: 10px;
	}
	.trade>.item:last-child{
		margin-bottom: 0;
	}
	.trade>.item>.user-container{
		width: 100%;
		height: 40px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 5px;
	}
	.trade>.item>.user-container>.user{
    width: 100%;
		height: 100%;
		display: flex;
    /* outline: 1px solid red; */
	}
	.trade>.item>.user-container>.user>.user-image{
		width: 40px;
		height: 40px;
		border-radius: 50%;
	}
	.trade>.item>.user-container>.user>.name{
		height: 100%;
    display: inherit;
		line-height: 40px;
		font-weight: bold;
		font-size: 18px;
		text-align: center;
    margin-left: 10px;
  }

  .trade > .item > .user-container > .user > .price {
    margin-left: 20px;
    line-height: 40px;
    /* outline: 1px solid red; */
    color: red
	}
	.trade>.item>.user-container>.concern{
		width: 70px;
		height: 30px;
		line-height: 30px;
		text-align: center;
		border: 1px solid black;
		border-radius: 20px;
		font-weight: bold;
	}
	.trade>.item>.info{
    width: 100%;
		color: #666;
		margin-bottom: 5px;
		display: flex;
    position: relative;
  }

  .trade > .item > .info > .text {
    width: 89%;
    overflow: hidden;
	}

  .trade > .item > .info > .navigateTo {
    display: inline;
    position: absolute;
    right: 0;
    bottom: 0;
    color: blue;
  }

  .trade > .item > .imgs {
		width: 100%;
    height: 160px;
    margin-bottom: 10px;
    /* outline: 1px solid red; */
  }

  .trade > .item > .imgs > .img {
    width: 260px;
    height: 100%;
    border-radius: 12px;
  }

  .trade > .item > .social-actions {
    width: 80%;
		height: 21px;
		display: flex;
		justify-content: space-between;
	}
	.trade>.item>.social-actions>.social{
		display: inline-flex;
	}
	.trade>.item>.social-actions>.social>.social-image{
		width: 20px;
		height: 20px;
	}

  .channels {
    width: 100%;
    height: 180px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .channels > .channel {
    width: 80px;
    height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
  }

  .channels > .channel > .icon {
    width: 35px;
    height: 35px;
  }

  .channels > .channel > .name {
    font-size: 14px;
  }
</style>